<ui:composition xmlns="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:rich="http://richfaces.org/rich"
  xmlns:a4j="http://richfaces.org/a4j"
  xmlns:zanata="http://java.sun.com/jsf/composite/zanata"
  template="../WEB-INF/template/template_nobanner.xhtml">

  <ui:define name="page_title">#{msgs['jsf.InactiveAccount']}</ui:define>

  <ui:define name="center_content">
    <a4j:jsFunction name="sendActivationEmail"
      action="#{inactiveAccountAction.sendActivationEmail}"/>

    <script type="application/javascript">
      function getNewEmailField() {
        return jQuery('#' + jqSelector('#{rich:clientId('emailInput')}'));
      }

      function getInactiveAccountForm() {
        return jQuery('#' + jqSelector('#{rich:clientId('inactiveAccountForm')}'));
      }

      jQuery(document).ready(function() {
        getInactiveAccountForm().keypress(function(e) {
          if(e.which == 13) {
            if(getNewEmailField().is(":focus")) {
              e.preventDefault();
              e.stopPropagation();
              jQuery('#' + jqSelector('#{rich:clientId('updateEmail')}')).click();
              return false;
            }
          }
        });
      });
    </script>

    <div class="header__logo-only">
      <h:link outcome="/public/home.xhtml" id="home" tabindex="1">
        <img src="#{request.contextPath}/resources/assets/img/logo/logo.svg" alt="Zanata"/>
      </h:link>
    </div>

    <div class="g--centered">
      <div class="g__item l--constrain-medium">
        <div class="l--push-v-1">
          <div class="l--push-top-half g__item">
            <h2 class="gamma heading--sub">#{msgs['jsf.InactiveAccount']}</h2>
            <h:form id="inactiveAccountForm" styleClass="l--push-top-half l--pad-all-1 bg--pop-higher">

              <button id="resendEmail" class="button button--full button--primary loader"
                onclick="sendActivationEmail()">
                <span class="loader__label">
                  #{msgs['jsf.ResendActivationEmail']}
                </span>
              </button>

              <h:outputText value="#{msgs['jsf.or']}"/>

              <zanata:decorate id="email" styleClass="l--push-top-quarter" componentId="emailInputField">
                <div class="form--inline">
                  <h:inputText id="emailInput" styleClass="form--inline__input" value="#{inactiveAccountAction.email}"
                    placeholder="#{msgs['jsf.email.placeholder']}">
                    <a4j:ajax event="blur" render="emailInputField"/>
                  </h:inputText>

                  <div class="form--inline__suffix">
                    <h:commandButton id="updateEmail" styleClass="form--inline__addon button--primary"
                      value="#{msgs['jsf.UpdateEmail']}"
                      action="#{inactiveAccountAction.changeEmail}"/>
                  </div>
                </div>
              </zanata:decorate>
            </h:form>
          </div>
        </div>
      </div>
    </div>
  </ui:define>

</ui:composition>
